<template>
    <div>
        <ul class="mui-table-view">
				<!-- <li class="mui-table-view-cell mui-media"> -->
					<!-- vue-rosource 获取资源渲染到页面 -->
					<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
					<router-link :to="'/home/newsinfo'+item.id">
						<img class="mui-media-object mui-pull-left" src= {{ item.img }}>
						<div class="mui-media-body">
							<!-- 渲染页面是，标题等数据都用差值表达式表示 -->
							<h1>{{ item.title }}</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：2019/2/24 23:07</span>
                                <span>点击 0 次</span>
                            </p>
						</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media">
					<router-link to="/home/newsinfo">
						<img class="mui-media-object mui-pull-left" src="https://images.gitee.com/uploads/48/4822348_zytttttt0.png!avatar100?1550659110">
						<div class="mui-media-body">
							<h1>幸福</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：2019/2/24 23:07</span>
                                <span>点击 0 次</span>
                            </p>
						</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media">
					<router-link to="/home/newsinfo">
						<img class="mui-media-object mui-pull-left" src="https://images.gitee.com/uploads/48/4822348_zytttttt0.png!avatar100?1550659110">
						<div class="mui-media-body">
							<h1>幸福</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：2019/2/24 23:07</span>
                                <span>点击 0 次</span>
                            </p>
						</div>
					</router-link>
				</li>

				<li class="mui-table-view-cell mui-media">
					<router-link to="/home/newsinfo">
						<img class="mui-media-object mui-pull-left" src="https://images.gitee.com/uploads/48/4822348_zytttttt0.png!avatar100?1550659110">
						<div class="mui-media-body">
							<h1>幸福</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：2019/2/24 23:07</span>
                                <span>点击 0 次</span>
                            </p>
						</div>
					</router-link>
				</li>

				<li class="mui-table-view-cell mui-media">
					<router-link to="/home/newsinfo">
						<img class="mui-media-object mui-pull-left" src="https://images.gitee.com/uploads/48/4822348_zytttttt0.png!avatar100?1550659110">
						<div class="mui-media-body">
							<h1>幸福</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间：2019/2/24 23:07</span>
                                <span>点击 0 次</span>
                            </p>
						</div>
					</router-link>
				</li>

			</ul>
    </div>
</template>

 <script>
import { Toast } from "mint-ui";
import axios from 'axios'
export default {
    data() {
		return {
			newslist:[]//新闻列表
		};
	},
	created(){
		this.getNewList();
	},
	methods:{
		getNewList(){

			// 获取新闻列表 vue-resource方法
			// this.$http.get('http://localhost:8080/static/data.json').then(result =>{
			// 	if(result.body.status === 0 ){
			// 		// 如果没有失败应该把数据保存到data中
			// 		this.newslist = result.body.message;
			// 	}else{
			// 		Toast('获取新闻列表失败')
			// 	}
			// }).catch(function(err){
			// 		console.log(err);
			// 	})

			// this.$http({
			// 	methods:"get",
			// 	url:"http://localhost:8080/static/data.json",
			// 	dataType:"json",
			// 	crossDomain:true,
			// 	cache:false
			// }).then(resolve =>{
			// 	console.log("请求成功",resolve)
			// }),
			// reject => {
			// 	console.log("请求失败",reject)
			// }

			axios.get('http:localhost:8080/api/static/data.json').then((res) =>{
				var result = res.data
				console.log(result)
			})



		}
	}
}


</script>

<style lang="scss" scoped>
.mui-table-view{
    li{
        h1{font-size: 14px;}
        .mui-ellipsis{
            font-size: 12px;
            color: #226aff;
            display: flex;
            // 主轴左右对齐
            justify-content: space-between;
        }
    }
}
</style>
